<template>
	<div class="detail-wrap">
		<div class="detail-left">
			<div class="product-board">
				<img src="../assets/images/timg.jpg" alt="">
				<ul>
					
				<!-- <li v-for="nav in detailsNav">{{nav.title}}</li> -->
				<router-link active-class="active" :to="{path:'/details/'+nav.tag}" tag="li" v-for="nav detailsNav">{{nav.title}}</router-link>
				</ul>
			</div>
		</div>
		<div detail-right>
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default{
		name:'details',
		data(){
			return{
				detailsNav:[
					{title:'开放产品',tag:'earth'},
					{title:'品牌营销',tag:'loud'},
					{title:'使命必达',tag:'car'},
					{title:'勇攀高峰',tag:'hill'}
				],
				imgUrl:{
					"/details/earth":require("../assets/images/timg.jpg"),
					"/details/hill":require("../assets/images/timg.jpg"),
					"/details/car":require("../assets/images/timg.jpg"),
					"/details/loud":require("../assets/images/timg.jpg"),
				}
			}
		},
		computed:{
			getUrl(){
				return this.imgUrl[this.$route.path];
			}
		}
	}
</script>

<style> .detail-wrap { width: 1200px; margin: 0 auto; overflow: hidden; padding-top: 20px; }.detail-left {
float: left; width: 200px; text-align: center; }.detail-right {
float: left; width: 980px; margin-left: 20px; }.product-board { background: #fff; padding: 20px 0; }.product-board ul { margin-top: 20px; }.product-board li { text-align: left; padding: 10px 15px; cursor: pointer; }.product-board li.active, .product-board li:hover {
}.sales-board-des h3 {
font-size: 18px;
font-weight: bold; padding: 20px 0 10px 0; }.sales-board-des li { padding: 5px 0; }.sales-board-table { width: 100%; margin-top: 20px; }.sales-board-table th { background: #4fc08d; color: #fff; }.sales-board-table td { border: 1px solid #f0f2f5; padding: 15px; } </style>